<template lang="html">
  <div class="form-box">
    <group class="input-defalut">
      <x-input placeholder="输入手机号" :min="11" :max="11" type="tel" is-type="china-mobile" required ref="phone" @on-change="onChange" v-model="phone">
        <img src="../../assets/mobile.png" alt="" slot="label" class="input-icon phone">
      </x-input>
    </group>
    <group class="input-defalut">
      <x-input placeholder="输入验证码" v-model="email.code" class="weui-vcode" type="number" ref="identify" @on-change="onChange" :min="6" :cellphone="phone">
        <img src="../../assets/email.png" alt="" slot="label" class="input-icon code">
        <countdown slot="right" @click.native="send" ref="countBtn" :disabled="disabled">
        </countdown>
      </x-input>
    </group>
    <group class="input-defalut">
      <x-input placeholder="输入新邮箱" v-model="email.email" required type="email" is-type="email" ref="newEmail" @on-change="onChange">
        <img src="../../assets/mail_fill.png" alt="" slot="label" class="input-icon">
      </x-input>
    </group>
    <div class="btn-box">
      <x-button class="btn" :disabled="!phoneValid||!identifyValid||!newEmailValid" @click.native="sure">确认</x-button>
    </div>
  </div>
</template>

<script>
import { Group, XInput, XButton } from 'vux'
import router from '../../router/index.js'
import Countdown from '../Countdown/Countdown.vue'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      disabled: true,
      phoneValid: false,
      identifyValid: false,
      newEmailValid: false,
      phone: '',
      email: {
        email: '',
        code: ''
      }
    }
  },
  created () {
    this.setSelectFooter(false)
    this.setShowBack(true)
    this.setBackground(true)
  },
  methods: {
    onChange () {
      this.phoneValid = this.$refs.phone.valid
      this.identifyValid = this.$refs.identify.valid
      this.newEmailValid = this.$refs.newEmail.valid
      // 发送验证码手机检验
      this.disabled = !this.phoneValid
    },
    sure () {
      this.$store.dispatch('changeInfo', this.email).then((res) => {
        let result = res.data
        if (result.Code === 204) {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
          router.go(-1)
        } else if (result.Code === 405 || result.Code === 403) {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
          this.setLogin(true)
        } else {
          this.setToast({
            show: true,
            type: 'text',
            text: result.Message
          })
        }
      })
    },
    ...mapMutations({
      setSelectFooter: 'setSelectFooter',
      setShowBack: 'setShowBack',
      setToast: 'setShowToast',
      setLogin: 'setPopup',
      setBackground: 'setBackground'
    })
  },
  components: {
    Group,
    XInput,
    XButton,
    Countdown
  }
}
</script>

<style lang="css">
</style>
